<template>
  <div class="footer-container" v-if="isShow">
    <router-link class="footer-item home" tag="div" to="/main" :active-class="'active'">
      <div class="icon"></div>
      <p>首页</p>
    </router-link>
    <router-link class="footer-item shopCart" tag="div" to="/cart" :active-class="'active'">
      <div class="icon"></div>
      <p>购物车</p>
    </router-link>
    <router-link class="footer-item my" tag="div" to="/my" :active-class="'active'">
      <div class="icon"></div>
      <p>我的</p>
    </router-link>
  </div>
</template>

<script>
export default {
  data () {
    return {
      nowPath: null, // 当前path
    }
  },
  computed: {
    routesList () {
      return this.$router.options.routes
    },
    isShow () {
      return this.routesList.filter(item => item.path === this.nowPath).length ? this.routesList.filter(item => item.path === this.nowPath)[0].footer : false
    },
    routerData () {
      return this.routesList.filter(item => item.path === this.nowPath)[0]
    }
  },
  watch: {
    $route (newVal, oldVal) {
      this.nowPath = newVal.path
    }
  },
  mounted () {
    this.nowPath = this.$route.path
  },
}
</script>

<style lang="scss" scoped>
.footer-container {
  position: fixed;
  display: flex;
  bottom: 0;
  width: 100vw;
  height: 100px;
  padding: 10px 0;
  background: #fff;
  .footer-item {
    flex: 1;
    text-align: center;
    font-size: 0;
    &.active {
      color: #FF4646;
    }
    .icon {
      width: 50px;
      height: 50px;
      margin: 0 auto;
    }
    &.home {
      .icon {
        background: url('~@/assets/icon/home.png');
        background-size: 100% 100%;
      }
      &.active {
        .icon {
          background: url('~@/assets/icon/home_active.png');
          background-size: 100% 100%;
        }
      }
    }
    &.shopCart {
      .icon {
        background: url('~@/assets/icon/cart.png');
        background-size: 100% 100%;
      }
      &.active {
        .icon {
          background: url('~@/assets/icon/cart_active.png');
          background-size: 100% 100%;
        }
      }
    }
    &.my {
      .icon {
        background: url('~@/assets/icon/my.png');
        background-size: 100% 100%;
      }
      &.active {
        .icon {
          background: url('~@/assets/icon/my_active.png');
          background-size: 100% 100%;
        }
      }
    }
    p {
      font-size: 25px;
    }
  }
}
</style>